
<template>
  <div>
    <div class="item" @click="showMask = !showMask">
      <span>城市</span>
      <i class="el-icon-arrow-up" v-if="showMask"></i>
      <i class="el-icon-arrow-down" v-else></i>
    </div>
    <transition
      name="fade"
      enter-active-class="fadeIn"
      leave-active-class="fadeOut"
    >
      <div v-if="showMask" class="mask">
        <p>当前定位城市</p>
        <p>全部城市</p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "z-city",
  data () {
    return {
      showMask: false
    }
  },
  created () {

  },
  methods: {

  }
}

</script>
<style scoped lang='scss'>
.item,
.el-icon-arrow-down {
  cursor: pointer;
  font-weight: 700;
}
.mask {
  position: absolute;
  z-index: 99;

  width: 400px;
  height: 500px;
  background-color: white;
  border: 1px solid #eee;
  border-radius: 10px;
}
</style>